<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>1-使用文档碎片减少DOM操作</title>
</head>
<body>
  <ul id="list"></ul>
  <script>
    /*
    // 不使用文档碎片时，每次appendChild都是一次DOM操作
    // 使用文档碎片将5次合并成一次  
    const list = document.querySelector('#list')

    for (let i = 0; i < 5; i++) {
      const item = document.createElement('li')
      item.innerHTML = `项目${i}`
      list.appendChild(item)
    }
    */

    const list = document.querySelector('#list')
    const fragment = document.createDocumentFragment()

    for (let i = 0; i < 5; i++) {
      const item = document.createElement('li')
      item.innerHTML = `项目${i}`
      fragment.appendChild(item) // 这里只是存放在fragment
    }
    list.appendChild(fragment) // 只操作了一次DOM
  </script>
</body>
</html>